<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的文档页面</title>
    <!-- zui -->
    <link href="dist/css/zui.min.css" rel="stylesheet">
    <link href="dist/lib/uploader/zui.uploader.min.css" rel="stylesheet">

</head>

<body>
    <div id="head"></div>
    <div class="col-md-4 col-md-offset-4">
        <div class="panel">
            <div class="panel-heading">
                文档上传
            </div>
            <div class="panel-body">
                <div class="input-group with-padding">
                    <span class="input-group-addon">文件名</span>
                    <input type="text" class="form-control" placeholder="请输入展示的文件名" id="fileName">
                </div>

                <div class="input-group with-padding">
                    <span class="input-group-addon">下载积分</span>
                    <input type="text" class="form-control" placeholder="请输入下载积分" id="downLoadScore">
                </div>

                <div id='uploaderExample2' class="uploader" data-ride="uploader">
                    <div class="uploader-message text-center">
                        <div class="content"></div>
                        <button type="button" class="close">×</button>
                    </div>
                    <div class="uploader-files file-list file-list-lg" data-drag-placeholder="请拖拽文件到此处"></div>
                    <div class="uploader-actions">
                        <div class="uploader-status pull-right text-muted"></div>
                        <button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件</button>
                        <button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 开始上传</button>
                    </div>
                </div>
            </div>
            <div class="with-padding">
                <button class="btn btn-block btn-success" type="button" id="loadInformation">上传信息</button>
            </div>
        </div>
    </div>

</body>

<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script src="dist/lib/jquery/jquery-3.4.1.min.js"></script>
<!-- ZUI Javascript组件 -->
<script src="dist/js/zui.min.js"></script>
<!-- layer弹窗JS -->
<script src="layer/layer.js"></script>
<!-- nav.js -->
<script src="js/nav.js"></script>
<!--文件上传-->
<script src="dist/lib/uploader/zui.uploader.min.js"></script>
<script>
    var newFilePath = null;
    var newFileSize = null;
    var newFileId=null;
    var typeScore =null;
    $('#uploaderExample2').uploader({
        // autoUpload: true,            // 当选择文件后立即自动进行上传操作
        url: '/fileInfo/upload',  // 文件上传提交地址
        lang: 'zh_cn', // 设置界面的语言
        filters: {
            // 只允许上传图片或图标（.ico）
            mime_types: [
                {title: '图片', extensions: 'jpg,gif,png'},
                {title: '图标', extensions: 'ico'},
                {title: '文本文档', extensions: 'txt'},
                {title: 'word文档', extensions: 'doc'},
                {title: 'ppt演示文件', extensions: 'ppt'},
                {title: 'ppt演示文件', extensions: 'pptx'}
            ],
            // 最大上传文件为 1MB
            max_file_size: '40mb',
            // 不允许上传重复文件
            prevent_duplicates: true
        },
        responseHandler: function(responseObject, file) { // 服务器响应的回调
            console.log(responseObject, file);
            layer.alert(file.remoteData.message);
            //存储文件位置
            newFilePath =file.remoteData.datas['filepath'];
            newFileSize = file.remoteData.datas['filesize'];
            newFileId=file.remoteData.datas['fileType'];
            typeScore = file.remoteData.datas['typeScore'];
            console.log(newFilePath,newFileSize);
        },
        chunk_size: 0 // 分片上传
    });
    //发送ajax添加上传文件
    function fileuPloadAjax() {
        var showfileName = $('#fileName').val();
        var downLoadScore = $('#downLoadScore').val();

        if (showfileName == "" || downLoadScore==""){
            layer.alert("输入框不能为空!!!!");
            return;
        }
        if (newFilePath == null || newFileSize==null){
            layer.alert("文件还没选择!!");
            return;
        }
        var userId = sessionStorage.getItem("userId");
        $.ajax({
            url: "fileInfo/fileRowUpload?typeScore="+typeScore,
            type: "put",
            dataType:"json",
            contentType:"application/json;charset=UTF-8",
            data: JSON.stringify({
                fileName:showfileName,
                fileScore:downLoadScore,
                savePath:newFilePath,
                fileSize:newFileSize,
                userId:userId,
                typeId:newFileId
            }),
            success: function (data) {
                layer.confirm(data.message, {
                    btn: ['确定'] //按钮
                }, function() {
                    document.location.reload();
                });

            }
        });
    }
    //点击上传
    $("#loadInformation").click(function () {
        fileuPloadAjax();
    });
</script>


</html>